<template>
  <div class="register-container">
    <h2>注册用户</h2>
    <form action="register" method="post">
      <div class="form-group">
        <label for="email">Email:</label>
        <input v-model="registerUser.email" type="email" id="email" name="email" required="">
      </div>
      <div class="form-group">
        <label for="nickname">Nickname:</label>
        <input v-model="registerUser.nickname" type="text" id="nickname" name="nickname" required="">
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input v-model="registerUser.password" type="password" id="password" name="password" required="">
      </div>
      <div class="form-group">
        <label for="verifyCode">Verify Code:</label>
        <input v-model="registerUser.verifyCode" type="text" id="verifyCode" name="verifyCode" required="">
        <img id="defaultKaptcha" alt="验证码" @click="changeKaptcha"/>
      </div>
      <div class="form-group">
        <input type="button" value="Register" @click="register">
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";
import utils from '@/utils/utils.js';
export default {
  name: "Register",
  data(){
    return{
      registerUser: {
        email: "",
        password: "",
        nickname: "",
        verifyCode: "",
        d:""
      },
    }
  },
  methods:{
    register(){
      // console.log(this.registerUser)
      axios.post('/user/register',this.registerUser).then(res =>{
        if(res.data.success){
          alert('注册成功，跳转到登录页')
          this.$router.push('/login')
        }else{
          alert(res.data.message)
        }
      })
    },
    changeKaptcha(){
      let d = utils.generateRandomString(8);
      this.registerUser.d = d
      // console.log(this.$baseURL)
      document.getElementById("defaultKaptcha").src
          =this.$baseURL + "/defaultKaptcha?d="+d
    }
  },
  mounted() {
    this.changeKaptcha()
  }
}
</script>

<style scoped>

.register-container {
  width: 300px;
  margin: 0 auto;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.register-container h2 {
  text-align: center;
  color: #5b7083;
  margin-bottom: 20px;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  font-weight: bold;
  color: #5b7083;
  margin-bottom: 5px;
}
.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 14px;
}
.form-group input[type="submit"] {
  background-color: #007BFF;
  color: #fff;
  cursor: pointer;
}
.form-group input[type="submit"]:hover {
  background-color: #0056b3;
}
</style>